<template>
  <div class="user-table-page">
    <ElTable
      :data="tableData"
      :columns="tableColumns"
      show-selection
      show-pagination
      :pagination="pagination"
      :loading="loading"
      @selection-change="handleSelect"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
      <!-- 姓名列 -->
      <template #name="{ row }">
        <div class="name-cell">
          <span>{{ row.name }}</span>
        </div>
      </template>

      <!-- 操作模块列 -->
      <template #operationModule="{ row }">
        <el-tag :type="getMethodTagType(row.operationModule)">
          {{ row.operationModule }}
        </el-tag>
      </template>

      <!-- 操作时间列 -->
      <template #operationTime="{ row }">
        <span class="operation-time-text">{{ formatDateTime(row.operationTime) }}</span>
      </template>

      <!-- 操作状态列 -->
      <template #operationStatus="{ row }">
        <el-tag :type="getStatusTagType(row.operationStatus)">
          {{ row.operationStatus }}
        </el-tag>
      </template>

      <!-- 操作列 -->
      <template #action="{ row }">
        <el-button size="small" @click="viewDetail(row)" type="primary">详情</el-button>
      </template>
    </ElTable>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue';
import ElTable from '@/components/Table/ElTable.vue';

// 1. 接收父组件传递的参数
const props = defineProps({
  // 加载状态
  loading: {
    type: Boolean,
    default: false
  },
  // 日志数据
  logsData: {
    type: Array,
    default: () => []
  },
  // 分页信息
  pagination: {
    type: Object,
    default: () => ({
      currentPage: 1,
      pageSize: 10,
      total: 0,
      totalPages: 0
    })
  }
});

// 2. 定义事件发射
const emit = defineEmits(['size-change', 'current-change', 'view-detail']);

// 3. 表格列配置
const tableColumns = [
  { prop: 'name', label: '操作用户', width: 120, align: 'center', slotName: 'name' },
  { prop: 'operationModule', label: '操作模块', width: 120, align: 'center', slotName: 'operationModule' },
  { prop: 'operationContent', label: '操作内容', width: 200, align: 'center' },
  { prop: 'ipAddress', label: 'IP地址', width: 120, align: 'center' },
  { prop: 'operationTime', label: '操作时间', width: 120, align: 'center', slotName: 'operationTime' },
  { prop: 'operationStatus', label: '操作状态', width: 120, align: 'center', slotName: 'operationStatus' },
  { prop: 'duration', label: '执行时间(ms)', width: 120, align: 'center' },
  { prop: 'action', label: '操作', width: 100, align: 'center', slotName: 'action' }
];

// 4. 表格数据
const tableData = computed(() => {
  return props.logsData || [];
});

// 5. 分页配置
const pagination = computed(() => {
  return props.pagination || {
    currentPage: 1,
    pageSize: 10,
    total: 0,
    totalPages: 0
  };
});

// -------------------------- 事件处理 --------------------------
const handleSelect = (selectedRows) => {
  console.log('勾选的行：', selectedRows);
};

const handleSizeChange = (val) => {
  // 触发父组件的事件
  emit('size-change', val);
};

const handleCurrentChange = (val) => {
  // 触发父组件的事件
  emit('current-change', val);
};

// 格式化日期时间
const formatDateTime = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN');
};

// 获取HTTP方法标签类型
const getMethodTagType = (method) => {
  switch (method) {
    case 'GET': return 'primary';
    case 'POST': return 'success';
    case 'PUT': return 'warning';
    case 'DELETE': return 'danger';
    default: return 'info';
  }
};

// 获取状态标签类型
const getStatusTagType = (status) => {
  return status === '操作成功' ? 'success' : 'danger';
};

// 查看详情
const viewDetail = (row) => {
  console.log('查看日志详情:', row);
  // 触发父组件的事件
  emit('view-detail', row);
};
</script>

<style scoped lang="scss">
.user-table-page {
  padding: 0;

  .name-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  // 操作时间列样式
  .operation-time-text {
    color: #666;
    font-size: 14px;
  }

  // 表格整体样式
  :deep(.el-table) {
    width: 100%;

    // 表头文字：黑色
    & .el-table__header .cell {
      color: #000;
      font-weight: 500;
    }

    // 表格数据文字：灰色
    & .el-table__body .cell {
      color: #999 ;
    }

    // 表格行 hover 效果（保留原有逻辑）
    .el-table__row:hover {
      background-color: #fafafa !important;
    }
  }

  // 分页样式
  .el-pagination {
    margin-top: 16px;
    text-align: right;
  }
}
</style>
